<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>公共样式</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
    <link href="./css/tea-common-css.css" rel="stylesheet">

    <script src="./js/index.js"></script>
</head>
<body>
    
    <section style="padding:50px">
        <br/>
        <h1>h1标题123abc</h1>
        <h2>h2标题123abc</h2>
        <h3>h3标题123abc</h3>
        <h4>h4标题123abc</h4>
        <h4>.nav1</h4>
        <div style="padding:50px;background-color:#26b7bc">
            <ul class="nav nav-pills nav1">
                <li><a href="####">Messages</a></li>
                <li><a href="####">Messages</a></li>
                <li><a href="####">Messages</a></li>
                <li class="active"><a href="####">Home</a></li>
                <li><a href="####">Messages</a></li>
                <li><a href="####">Profile</a></li>
                <li><a href="####">Messages</a></li>
            </ul>
        </div>
        <br/>
        <h4>.nav2</h4>
        <ul class="nav nav-pills nav2">
            <li><a href="####">Home</a></li>
            <li><a href="####">Profile</a></li>
            <li><a href="####">Messages</a></li>
            <li class="active"><a href="####">Messages<span class="caret"></span></a></li>
            <li><a href="####">Messages</a></li>
            <li><a href="####">Messages</a></li>
            <li><a href="####">Messages</a></li>
        </ul>
        <br/>
        <h4>.nav3</h4>
        <ul class="nav nav-pills nav3">
            <li role="presentation" class="active"><a href="####">Home</a></li>
            <li role="presentation"><a href="####">Profile</a></li>
            <li role="presentation"><a href="####">Messages</a></li>
        </ul>
        <br/>
        <h4>.nav4</h4>
        <ul class="nav nav-pills nav4">
            <li class="active"><a href="####">Home</a></li>
            <li><a href="####">Messages</a></li>
        </ul>
        <br/>
        <h4>.nav5</h4>
        <ul class="nav nav-pills nav5">
            <li class="active"><a href="####">Home</a></li>
            <li><a href="####">Messages</a></li>
        </ul>
        <br/>
        <h4>.nav6</h4>
        <ul class="nav nav-pills nav6">
            <li class="active"><a href="####">Home</a></li>
            <li><a href="####">Messages</a></li>
            <li><a href="####">Messages</a></li>
        </ul>
        <br/>
        <h4>.ry-drop-down</h4>
        <div class="btn-group ry-drop-down">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                数学科任教师sdfsdfsdf <span class="caret"></span><span class="caret caret-1"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="####">数学科任教师</a></li>
                <li><a href="####">语文科任教师</a></li>
                <li><a href="####">XXXX</a></li>
            </ul>
        </div>
        <br/>
        <br/>
        <h4>.ry-check-div</h4>
        <div class="ry-check-div">数学科任教</div>
        <div class="ry-check-div checked">数学科任</div>
        <div class="ry-check-div">数学科任教师</div>
        <br/>
        <br/>
        <h4>.ry-checkbox</h4>
        <div>
            <label class="checkbox-inline ry-checkbox">
                <input type="checkbox" id="inlineCheckbox1" value="option1"> 1adafc
            </label>
            <label class="checkbox-inline ry-checkbox on-check">
                <input type="checkbox" id="inlineCheckbox2" value="option2"> 2adcedcfe
            </label>
            <label class="checkbox-inline ry-checkbox">
                <input type="checkbox" id="inlineCheckbox3" value="option3"> 3efcwecfwecf
            </label>
        </div>
        <br/>
        
        <h4>.ry-radio</h4>
        <div>
            <label class="radio-inline ry-radio">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1waecfwaefc
            </label>
            <label class="radio-inline ry-radio">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2wefcwefwef
            </label>
            <label class="radio-inline ry-radio on-check">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3wefweewf
            </label>
        </div>
        <br/>
        <h4>.ry-search-input</h4>
        <div class="form-group has-feedback ry-search-input">
            <input type="text" placeholder="搜索" class="form-control" id="inputSearch" aria-describedby="inputSearchStatus">
            <span class="glyphicon glyphicon-search"></span>
            <span class="glyphicon glyphicon-arrow-right"></span>
        </div>

        <br/>
        <h4>.ry-table-striped</h4>
        <table class="table table-striped ry-table-striped">
            <thead>
                <tr>
                    <th>1</th><th>2</th><th>3</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>1</td><td>2</td><td>3</td></tr>
                <tr><td>1</td><td>2</td><td>3</td></tr>
                <tr><td>1</td><td>2</td><td>3</td></tr>
                <tr><td>1</td><td>2</td><td>3</td></tr>
            </tbody>
        </table>
        <br/>
        <h4>.ry-navigation</h4>
        <nav class="ry-navigation" aria-label="Page navigation">
            <ul class="pagination">
              <li>
                <a href="####" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li><a href="####">1</a></li>
              <li><a href="####">2</a></li>
              <li><a href="####">3</a></li>
              <li><a href="####">4</a></li>
              <li><a href="####">5</a></li>
              <li>
                <a href="####" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
        </nav>
        <br/>
        <h4>.ry-btn-blue</h4>
        <button type="button" class="btn ry-btn-blue">蓝色按钮</button>
        <br/>
        <h4>.ry-btn-red</h4>
        <button type="button" class="btn ry-btn-red">红色按钮</button>
        <br/>
        <h4>.ry-btn-white</h4>
        <button type="button" class="btn ry-btn-white">白色按钮</button>
        <br/>
        <h4>.legend</h4>
        <div class="legend">
            图例：<span class="bgc-light-green"></span>过线&nbsp;
            <span class="bgc-double-valid"></span>双有效&nbsp;
            <span class="bgc-light-orange"></span>临界生
        </div>
    </section>
    <footer>
        
    </footer>
</body>
</html>